<template>
  <div>
    <div class="page-header">
      <div class="page-header-index-wide">
        <a-breadcrumb style="margin-bottom: 15px;">
          <a-breadcrumb-item><router-link to="/landCenter/driverManagement">司机管理</router-link></a-breadcrumb-item>
          <a-breadcrumb-item>司机详情</a-breadcrumb-item>
        </a-breadcrumb>

        <div class="detail">
          <div class="main">
            <a-form-model
              ref="form0"
              :model="form0"
              :rules="rules"
              layout="inline"
              >
              <div class="row" style=" margin-bottom:8px;">
                <img src="/static/images/driver.png" class="logo"/>
                <div class="title">
                  <div v-if="editpart0.flag"><h1>姓名：{{detail.name}}</h1></div>
                  <div v-if="!editpart0.flag">
                    <a-form-model-item prop="name" label="姓名" class="driver_name">
                      <a-input v-model="form0.name" :max-length="10"/>
                    </a-form-model-item>
                  </div>
                </div>
                <div class="action">
                  <a-button v-if="!editpart0.flag" @click="editpartHandle(0, true)" style=" margin-right:12px;">取消</a-button>
                  <a-button type="primary" class="cardEdit" @click="editpartHandle(0, false)">{{editpart0.text}}</a-button>
                </div>
              </div>
              <div class="row">
                <div class="headerContent">
                  <detail-list v-if="editpart0.flag" size="small" :col="1" class="detail-layout">
                    <detail-list-item term="司机类型">{{isSelfOperationStr}}</detail-list-item>
                    <detail-list-item term="所属车队">{{detail.custName}}</detail-list-item>
                  </detail-list>
                  <a-row style="marginLeft: 44px;" v-if="!editpart0.flag">
                    <a-col :span="24">
                      <a-form-model-item prop="isSelfOperation" label="司机类型">
                        <a-select class="selectWidth" v-model="form0.isSelfOperation" @change="onChangeSelfOperation">
                          <a-select-option :key="1">自营</a-select-option>
                          <a-select-option :key="0">外派</a-select-option>
                        </a-select>
                      </a-form-model-item>
                    </a-col>
                    <a-col :span="24">
                      <a-form-model-item label="所属车队" prop="custId">
                        <a-select style="min-width: 200px"
                          show-search
                          :show-arrow="false"
                          :filter-option="false" :default-active-first-option="false"
                          :not-found-content="null"
                          :value="form0.custName"
                          @search="handleNameChange"
                          @select="handleSelect"
                        >
                          <a-select-option value="">请选择</a-select-option>
                          <a-select-option v-for="(d, index) in custIdList" :key="index">{{ d.name }}</a-select-option>
                        </a-select>
                      </a-form-model-item>
                    </a-col>
                  </a-row>
                </div>
                <div class="extra">
                  <a-row class="status-list">
                    <a-col :span="24" >
                      <div v-if="editpart0.flag" class="text">状态</div>
                      <div v-if="editpart0.flag" class="heading">{{statusStr}}</div>
                      <div v-if="!editpart0.flag" class="heading">
                        <a-form-model-item label="状态" prop="status" style="margin-right:0;">
                          <a-select v-model="form0.status">
                            <a-select-option :key="1">正常</a-select-option>
                            <a-select-option :key="0">冻结</a-select-option>
                          </a-select>
                        </a-form-model-item>
                      </div>
                    </a-col>
                  </a-row>
                </div>
              </div>
            </a-form-model>
          </div>
        </div>
      </div>
    </div>
     <div class="row">
      <div class="page-menu-tabs">
        <a-tabs :tabBarStyle="{}">
          <a-tab-pane tab="司机信息" key="1">
            <div class="content">
              <div class="page-header-index-wide">
                <a-card :bordered="false">
                  <a-form-model
                    ref="form1"
                    :model="form1"
                    :rules="rules"
                    layout="inline"
                  >
                    <a-button v-if="!editpart1.flag" class="cardCancel" @click="editpartHandle(1, true)">取消</a-button>
                    <a-button type="primary" class="cardEdit" @click="editpartHandle(1, false)">{{editpart1.text}}</a-button>
                    <div class="card-title">司机档案</div>
                    <a-row v-if="editpart1.flag">
                      <a-col :span="24">
                        <detail-list>
                          <detail-list-item term="手机号码">{{detail.phone}}</detail-list-item>
                          <detail-list-item term="驾驶证档案编号">{{detail.driverLicense}}</detail-list-item>
                          <detail-list-item term="身份证号码">{{detail.identityCard}}</detail-list-item>
                        </detail-list>
                      </a-col>
                    </a-row>
                    <a-row v-if="!editpart1.flag">
                      <a-col :span="8">
                        <a-form-model-item prop="phone" label="手机号码">
                          <a-input v-model="form1.phone" :max-length="11"/>
                        </a-form-model-item>
                      </a-col>
                      <a-col :span="8">
                        <a-form-model-item prop="driverLicense" label="驾驶证档案编号">
                          <a-input v-model="form1.driverLicense" :max-length="12"/>
                        </a-form-model-item>
                      </a-col>
                      <a-col :span="8">
                        <a-form-model-item prop="identityCard" label="身份证号码">
                          <a-input v-model="form1.identityCard" :max-length="18"/>
                        </a-form-model-item>
                      </a-col>
                    </a-row>
                  </a-form-model>
                </a-card>

                <a-card :bordered="false">
                  <a-form-model
                    ref="form2"
                    :model="form2"
                    :rules="rules"
                  >
                    <a-button v-if="!editpart2.flag" class="cardCancel" @click="editpartHandle(2, true)">取消</a-button>
                    <a-button type="primary" class="cardEdit" @click="editpartHandle(2, false)">{{editpart2.text}}</a-button>
                    <div class="card-title">司机证件</div>
                    <a-row>
                      <a-col :span="24">
                        <a-form-model-item prop="identityCardPic1" style="float: left;">
                          <upload-identity-card identityCardField="identityCardPic1" identityCardText="上传身份证正面照" :url="identityCardPic1Str" :disabled="editpart2.flag" @success="fileSuccess"/>
                        </a-form-model-item>
                        <a-form-model-item prop="identityCardPic2" style="float: left;">
                          <upload-identity-card identityCardField="identityCardPic2" identityCardText="上传身份证反面照" :url="identityCardPic2Str" :disabled="editpart2.flag" @success="fileSuccess"/>
                        </a-form-model-item>
                        <a-form-model-item prop="driverLicensePics" style="float: left;">
                          <upload-identity-card identityCardField="driverLicense" identityCardText="上传驾驶证" :url="detail.driverLicensePics" :disabled="editpart2.flag" @success="fileSuccess"/>
                        </a-form-model-item>
                        <a-form-model-item prop="qualificationCertificatePics" style="float: left;">
                          <upload-identity-card identityCardField="qualificationCertificate" identityCardText="上传从业资格证" :url="detail.qualificationCertificatePics" :disabled="editpart2.flag" @success="fileSuccess"/>
                        </a-form-model-item>
                      </a-col>
                    </a-row>
                  </a-form-model>
                </a-card>
              </div>
            </div>
          </a-tab-pane>

          <a-tab-pane tab="订单记录" key="2">
             <a-card :bordered="false">
              <div class="card-title">订单记录</div>
              <driver-order-list :id="id"/>
             </a-card>
          </a-tab-pane>

          <a-tab-pane tab="更换记录" key="3">
            <a-card :bordered="false">
              <div class="card-title">更换记录</div>
              <driver-change-record :id="id"></driver-change-record>
            </a-card>
          </a-tab-pane>
        </a-tabs>
      </div>
    </div>
  </div>
</template>

<script>
import debounce from 'lodash/debounce'
import DetailList from '@/components/DescriptionList'
import { queryTruckDriverInfo, updateTruckDriver } from '@/api/landCenter'
import { queryCustNameList } from '@/api'
import UploadIdentityCard from '@/components/UploadIdentityCard'
import driverOrderRecord from './driverDetailTab2'
import driverChangeRecord from './driverDetailTab3'

const DetailListItem = DetailList.Item
const fomrMessage = `必填项不能为空`
const buttonDefault = { text: '编辑', flag: true }
const buttonEdit = { text: '保存', flag: false, saveLoading: false }

export default {
  props: ['id'],
  components: {
    DetailList,
    DetailListItem,
    [UploadIdentityCard.name]: UploadIdentityCard,
    [driverOrderRecord.name]: driverOrderRecord,
    [driverChangeRecord.name]: driverChangeRecord
  },
  data () {
    this.handleNameChange = debounce(this.handleNameChange, 800)
    return {
      // part 0
      custIdList: [],
      form0: {
        isSelfOperation: 1,
        custId: '',
        custName: '',
        name: '',
        status: null
      },
      // part 1
      form1: {
        phone: '',
        driverLicense: '',
        identityCard: ''
      },
      // part 2
      form2: {
        identityCardPic1: '',
        identityCardPic2: '',
        identityCardPics: '',
        driverLicensePics: '',
        qualificationCertificatePics: ''
      },
      detail: {
        driverId: null,
        isSelfOperation: null, // 是否自营：1是，0否
        status: null,
        custId: null, // 客户（车队）id
        custName: '', // 车队名
        name: '', // 司机姓名
        phone: '', // 账号（手机号）
        password: null, // 密码
        driverLicense: '', // 驾驶证
        identityCard: '', // 身份证
        identityCardPics: '', // 身份证照片（正反面两张）
        driverLicensePics: '', // 司机驾驶证图片
        qualificationCertificatePics: '' // 从业资格证图片
      },
      editpart0: buttonDefault,
      editpart1: buttonDefault,
      editpart2: buttonDefault,
      rules: {
        custId: [{required: true, message: fomrMessage, trigger: ['blur', 'change']}],
        name: [{required: true, message: fomrMessage, trigger: 'blur'}],
        phone: [{required: true, message: fomrMessage, trigger: 'blur'}, {message: '手机号码限制纯11位数字', pattern: /^1[3456789]\d{9}$/, trigger: 'blur'}],
        driverLicense: [{required: true, message: fomrMessage, trigger: 'blur'}],
        identityCard: [{required: true, message: fomrMessage, trigger: 'blur'}],
        identityCardPic1: [{required: true, message: fomrMessage, trigger: 'blur'}],
        identityCardPic2: [{required: true, message: fomrMessage, trigger: 'blur'}],
        driverLicensePics: [{required: true, message: fomrMessage, trigger: 'blur'}],
        qualificationCertificatePics: [{required: true, message: fomrMessage, trigger: 'blur'}]
      }
    }
  },
  computed: {
    isSelfOperationStr () {
      return this.detail.isSelfOperation === 1 ? '自营' : (this.detail.isSelfOperation === 0 ? '外派' : '')
    },
    statusStr () {
      return this.detail.status === 1 ? '正常' : (this.detail.status === 0 ? '冻结' : '')
    },
    identityCardPic1Str () {
      return ~this.detail.identityCardPics.indexOf(',') ? this.detail.identityCardPics.split(',')[0] : ''
    },
    identityCardPic2Str () {
      return ~this.detail.identityCardPics.indexOf(',') ? this.detail.identityCardPics.split(',')[1] : ''
    }
  },
  mounted () {
    queryTruckDriverInfo({driverId: this.id}).then(rsp => {
      this.detail = Object.assign({}, this.detail, rsp.data)

      this.combineObjCommons(this.form0, rsp.data)
      this.combineObjCommons(this.form1, rsp.data)
      this.combineObjCommons(this.form2, rsp.data)
      this.form2.identityCardPic1 = this.identityCardPic1Str
      this.form2.identityCardPic2 = this.identityCardPic2Str
    })
    this.handleNameChange()
  },
  methods: {
    handleNameChange (nameLike = '') { // 车队
      queryCustNameList({
        nameLike,
        belongCompany: 'JIA_TE',
        custTypeLike: this.form0.isSelfOperation === 1 ? 'SELF_TEAM' : (this.form0.isSelfOperation === 0 ? 'EXPATRIATE_TEAM' : 'TEAM'),
        status: 1
      }).then(rsp => {
        this.custIdList = rsp.data
      })
    },
    onChangeSelfOperation () {
      this.form0.custId = ''
      this.form0.custName = ''
      this.handleNameChange()
    },
    handleSelect (index) {
      this.form0.custId = this.custIdList[index].id
      this.form0.custName = this.custIdList[index].name
      this.handleNameChange()
    },
    combineObjCommons (sm, big) {
      for (let k in sm) {
        sm[k] = big[k]
      }
    },
    saveFields (data) {
      return updateTruckDriver({driverId: this.detail.driverId, ...data}).then(rsp => {
        this.detail = Object.assign({}, this.detail, data)
        this.$message.success('保存成功')
      })
    },
    editpartHandle (part, isCancel) {
      if (!this.$root._bc.edit) {
        this.$message.error('您无此权限！')
        return
      }
      if (!this['editpart' + part].flag) {
        if (isCancel) {
          this.combineObjCommons(this['form' + part], this.detail)
          if (part === 2) {
            this.form2.identityCardPic1 = this.identityCardPic1Str
            this.form2.identityCardPic2 = this.identityCardPic2Str
          }
          this['editpart' + part] = buttonDefault
        } else {
          this.$refs['form' + part].validate(valid => {
            if (valid) {
              this.saveFields(this['form' + part]).then(() => {
                this['editpart' + part] = buttonDefault
              })
            }
          })
        }
      } else {
        this['editpart' + part] = buttonEdit
      }
    },
    fileSuccess (key, url) {
      if (key === 'identityCardPic1') {
        this.form2.identityCardPic1 = url
        this.form2.identityCardPics = this.form2.identityCardPic1 + ',' + this.form2.identityCardPic2
      } else if (key === 'identityCardPic2') {
        this.form2.identityCardPic2 = url
        this.form2.identityCardPics = this.form2.identityCardPic1 + ',' + this.form2.identityCardPic2
      } else if (key === 'driverLicense') {
        this.form2.driverLicensePics = url
      } else if (key === 'qualificationCertificate') {
        this.form2.qualificationCertificatePics = url
      }
    }
  }
}
</script>

<style lang="less" scoped>
.page-header {
  background: #fff;
  padding: 12px 24px;
  .breadcrumb {
    margin-bottom: 16px;
  }

  .detail {
    display: flex;

    .main {
      width: 100%;
      flex: 0 1 auto;

      .row {
        display: flex;
        width: 100%;
      }

      .title {
        font-size: 20px;
        font-weight: 500;
        line-height: 28px;
        color: rgba(0, 0, 0, 0.85);
        flex: auto;
          h1{
            color: rgba(0, 0, 0, 0.85);
            font-weight: 600;
            font-size: 20px;
          }
      }
      .logo {
        width: 28px;
        height: 28px;
        border-radius: 4px;
        margin-right: 10px;
      }
      .content,
      .headerContent {
        flex: auto;
        color: rgba(0, 0, 0, 0.45);
        line-height: 22px;

        .link {
          margin-top: 16px;
          line-height: 24px;

          a {
            font-size: 14px;
            margin-right: 32px;
          }
        }
      }
      .extra {
        flex: 0 1 auto;
        margin-left: 88px;
        min-width: 242px;
        text-align: right;
      }
      .action {
        margin-left: 56px;
        min-width: 266px;
        flex: 0 1 auto;
        text-align: right;
        &:empty {
          display: none;
        }
      }
      .page-menu-tabs {
        width: 100%;
        margin: 15px 0 -17px 8px
      }
    }
  }
}
.ant-card {
  position: relative;
  margin: 0 24px 24px 24px;
  border: none;
  .cardEdit {
    position: absolute;
    right: 24px;
    top: 24px;
    z-index: 2;
  }
  .cardCancel{
    position: absolute;
    right: 104px;
    top: 24px;
    z-index: 2;
  }
  .card-title {
    position: relative;
    padding-left: 16px;
    font-size: 18px;
    line-height: 1;
    color: #000;
    margin-bottom: 20px;
    &:before {
      content: "";
      width: 5px;
      height: 18px;
      background: #1890ff;
      border-radius: 4px;
      position: absolute;
      left: 0;
      top: -1px;
    }
  }
  .hasContent {
    margin-bottom: 20px;
  }
}

.detail-layout {
  margin-left: 38px;
}
.text {
  color: rgba(0, 0, 0, .45);
}

.heading {
  color: rgba(0, 0, 0, .85);
  font-size: 20px;
}

.no-data {
  color: rgba(0, 0, 0, .25);
  text-align: center;
  line-height: 64px;
  font-size: 16px;

  i {
    font-size: 24px;
    margin-right: 16px;
    position: relative;
    top: 3px;
  }
}

.ant-form-inline .ant-form-item-with-help {
    margin-bottom: 5px!important
}

</style>
<style lang="less">
 .title .ant-form-item-label label{ font-size: 20px; font-weight: 600;}
 .ant-tabs-bar{ padding:0 24px; background: #fff; margin: 0 0 24px 0; border-bottom: 0;}
 .ant-tabs-nav .ant-tabs-tab{font-size: 16px;}
</style>
